<!-- 
    圆角梯形组件
 -->
<template>
  <section class="menu-item">
    <img
      v-if="!isSelected"
      class="normal"
      src="./image/normal.png"
      alt=""
      srcset=""
    />
    <img v-else class="selected" src="./image/selected.png" alt="" srcset="" />
    <img class="p1" src="./image/p1.png" alt="" srcset="" />
    <slot></slot>
  </section>
</template>

<script>
export default {
  // 组件名称
  name: "menuItem",
  // 组件参数 接收来自父组件的数据
  props: {
    isSelected: {
      type: Boolean,
      default: () => false,
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
img {
  position: relative;
  display: block;
}
.menu-item {
  position: absolute;
  width: 278px;
  height: 157px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  .p1 {
    width: 128px;
    height: 35px;
  }
  .normal {
    width: 262.3px;
    height: 122px;
  }
  .selected {
    width: 278px;
    height: 137px;
  }
}
</style>
